<template>
    <view>
        <!--pages/new_love/new_love.wxml-->
        <!--<view class="nl-container" animation="{{animationData}}">-->
        <view class="nl-container" v-if="flag">
            <!--图片-->
            <block v-for="(item, index) in array" :key="item.title">
                <view :class="'nl-img ' + (index % 2 == 0 ? 'right' : 'left')" v-if="item.check" @tap="tourl">
                    <view class="message" :data-title="item.title">{{ item.title }}</view>
                    <image class="images" mode="aspectFill" :src="item.img" :data-title="item.title"></image>
                </view>
            </block>
            <!--添加按钮-->
            <view class="nl nl-even" @tap="h2s">
                <text class="iconfont icon-tianjia"></text>
            </view>
        </view>
        <!--添加选择页面-->
        <view v-if="!flag">
            <!--黑页-->
            <!--<view class='nl-fixed'></view>-->
            <!--白页-->
            <view class="selector-header">
                <text>添加订阅</text>
                <text class="iconfont icon-guanbi1 close-selector" @tap="closeQian"></text>
            </view>
            <view class="nl-add">
                <!--输入框-->
                <view class="section1">
                    <input placeholder="填入你喜欢的订阅内容" class="nl-input" maxlength="16" :value="newqian.title" @confirm="subQian" @input="addQian" />
                    <span @tap.native="subQian">确认</span>
                    <!--图片选择-->
                    <view class="selectImg">
                        <!--<view  class="section2">
                <image src="{{tempFilePaths}}"  mode="aspectFill" style="width: 100%; height: auto"></image>
                <view bindtap="chooseimage">自定义图片</view>
                </view>-->
                        <view class="select_box" v-for="(item, index) in imgSelect" :key="index">
                            <image class="select_img" @tap="check_img" :data-index="index" mode="aspectFill" :src="item.url"></image>

                            <icon class="icon_img" v-if="imgIndex == index" type="success" size="50" />
                        </view>
                    </view>
                    <!--添加-->
                    <!--<button type="primary" class='section2 nl-btn ' size="default" bindtap="subQian"> 
        确认添加 </button>-->
                </view>
                <!--订阅-->
                <view class="section2">
                    <view class="section2-title">我的订阅</view>
                    <block class="section2" v-for="(item, index) in array" :key="index">
                        <button :id="'qian-' + index" v-if="item.check" :class="'nl-select ' + (item.check == false ? 'nl-select-check' : '')" @tap="checkSelect">
                            {{ item.title }}
                        </button>
                    </block>
                </view>
                <view class="section2">
                    <view class="section2-title">推介订阅</view>
                    <block class="section2" v-for="(item, index) in array" :key="item.title">
                        <button :id="'qian-' + index" v-if="!item.check" :class="'nl-select ' + (item.check == false ? 'nl-select-check' : '')" @tap="checkSelect">
                            {{ item.title }}
                        </button>
                    </block>
                </view>
                <view class="section2 nl-tip" @tap="clear">tip:</view>
                <view class="section2 nl-tip">最多十五个标签</view>
                <view class="section2 nl-tip">请勿重复输入相同意义的标签</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/new_love/new_love.js
var request = require('../../utils/request.js'); // const AV = require('../../utils/leancloud.js');
// var new = require('News.js')

var urls = '/pages/details/details?title=';
export default {
    data() {
        return {
            array: [
                {
                    title: '前端',
                    img: 'https://s3.bmp.ovh/imgs/2021/12/8b3c50de6cb008bc.jpg',
                    check: true
                },
                {
                    title: 'NBA',
                    img: 'https://s3.bmp.ovh/imgs/2021/12/b38f6460dbefaf51.jpg',
                    check: true
                },
                {
                    title: '军事',
                    img: 'https://s3.bmp.ovh/imgs/2021/12/333c0330e6f706b9.jpg',
                    check: true
                },
                {
                    title: '赵丽颖',
                    img: 'https://i.bmp.ovh/imgs/2021/12/7f2c7cecf1892cfc.png',
                    check: false 
                }
            ],
            flag: true,
            animationData: {},
            le: 5,
            newqian: {
                title: '',
                img: '',
                check: true
            },
            imgSelect: [],
            imgIndex: 0,
            trues: true,
            tempFilePaths: ['https://i.bmp.ovh/imgs/2021/12/7f2c7cecf1892cfc.png']
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        var that = this;
        uni.getStorage({
            key: 'Qians',
            success: function (res) {
                if (res.data.length != 0) {
                    that.setData({
                        array: res.data
                    });
                }
            }
        });
    },
    onReady: function () {
        // 页面渲染完成
    },
    onShow: function () {},
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        h2s: function () {
            var that = this;
            that.imgSelect = [];
            that.newqian = {
                title: '',
                img: '',
                check: true
            };
            that.setData({
                imgSelect: that.imgSelect,
                newqian: that.newqian
            });
            if (this.flag) {
                this.setData({
                    flag: false
                });
            } else {
                this.le = 0;

                for (var i = 0; i < this.array.length; i++) {
                    if (this.array[i].check) {
                        this.le++;
                    }
                }

                console.log(this.le);
                this.setData({
                    array: this.array,
                    le: this.le
                });
                this.setData({
                    flag: true
                });
            }
        },

        checkSelect: function (e) {
            var k = e.target.id.split('-')[1];
            this.array[k].check = !this.array[k].check;
            this.setData({
                array: this.array
            });
        },

        tourl: function (e) {
            console.log(e.target.dataset.title);
            getApp().globalData.title = e.target.dataset.title;
            uni.navigateTo({
                url: '/pages/newsItem/newsItem'
            });
        },

        //检查是否有数据
        addQian: function (e) {
            var that = this;
            that.imgSelect = [];
            that.setData({
                imgSelect: that.imgSelect
            });

            if (this.newqian.title != e.detail.value && e.detail.value != '') {
                this.newqian.title = e.detail.value; //检查是否相同

                uni.request({
                    url: 'https://route.showapi.com/109-35',
                    data: {
                        channelId: '',
                        channelName: '',
                        maxResult: '15',
                        needAllList: '',
                        needContent: '0',
                        needHtml: '',
                        page: '1',
                        showapi_appid: '860473',
                        title: e.detail.value,
                        showapi_sign: '772248c40b324c43b245b027004b528a',
                        showapi_timestamp: ''
                    },
                    header: {
                        'content-type': 'application/json'
                    },
                    success: function (res) {
                        var qian = res.data.showapi_res_body.pagebean.contentlist;
                        console.log(qian); // 判断是否存在数据

                        if (qian.length == 0) {
                            //  wx.showToast({
                            //     title: '该订阅关联数据为零',
                            //     icon: 'loading',
                            //     duration: 1000
                            // });
                        } else {
                            //汲取图片并且显示出来
                            for (var i = 0; i < qian.length; i++) {
                                if (qian[i].imageurls.length != 0) {
                                    for (var j = 0; j < 1 && j < qian[i].imageurls.length; j++) {
                                        that.imgSelect.push({
                                            url: qian[i].imageurls[j].url
                                        });
                                    }
                                }

                                if (that.imgSelect.length >= 7) {
                                    break;
                                }
                            }

                            that.setData({
                                imgSelect: that.imgSelect
                            });
                            that.newqian.img = that.imgSelect[0].url;
                            that.setData({
                                newqian: that.newqian,
                                trues: that.trues
                            });
                        }
                    },
                    fail: function () {
                        request.error();
                    }
                });
            }
        },

        subQian: function () {
            var that = this;

            if (that.newqian.title != '') {
                //本地保存自定义状态
                //判断是否有相同的
                var index = 0;

                for (var i = 0; i < that.array.length; i++) {
                    if (that.array[i].title == that.newqian.title) {
                        that.trues = false;
                        that.array[i] = that.newqian; //存在

                        uni.showToast({
                            title: '替换成功',
                            icon: 'loading',
                            duration: 1000
                        });
                        break;
                    }
                } // 不存在

                if (that.trues) {
                    that.array.push(that.newqian);
                    uni.showToast({
                        title: '添加成功',
                        icon: 'loading',
                        duration: 1000
                    });
                }

                that.setData({
                    array: that.array,
                    trues: true
                }); //本地保存自定义状态

                uni.setStorage({
                    key: 'Qians',
                    data: that.array
                });
            } else {
                uni.showToast({
                    title: '该订阅不能为空',
                    icon: 'loading',
                    duration: 1000
                });
            }
        },

        closeQian: function () {
            //本地保存自定义状态
            var that = this;
            uni.setStorage({
                key: 'Qians',
                data: that.array
            });
            this.h2s();
        },

        check_img: function (e) {
            var index = e.target.dataset.index;
            this.newqian.img = this.imgSelect[index].url;
            this.setData({
                newqian: this.newqian,
                imgIndex: index
            });
        },

        chooseimage: function () {
            var that = this;
            uni.chooseImage({
                count: 9,
                // 默认9
                sizeType: ['original', 'compressed'],
                // 可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'],
                // 可以指定来源是相册还是相机，默认二者都有
                success: function (res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    that.setData({
                        tempFilePaths: res.tempFilePaths
                    });
                    var tempFilePath = res.tempFilePaths[0];
                    new AV.File('file-name', {
                        blob: {
                            uri: tempFilePath
                        }
                    })
                        .save()
                        .then((file) => console.log(file.url()))
                        .catch(console.error);
                }
            });
        },

        clear: function () {
            uni.clearStorage();
            var that = this;
            uni.getStorage({
                key: 'Qians',
                success: function (res) {
                    if (res.data.length != 0) {
                        that.setData({
                            array: res.data
                        });
                    }
                }
            });
        }
    }
};
</script>
<style>
@import './recommendation.css';
</style>
